<template>
  <div class="chart-container">
    <div id="main" ref="chartRef"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref } from 'vue';

export default {
  name: 'Nannvfenbu',
  setup() {
    const chartRef = ref(null);
    let myChart = null;

    const initChart = () => {
      if (!chartRef.value) return;
      
      // 强制设置容器尺寸
      chartRef.value.style.width = '250px';
      chartRef.value.style.height = '290px';
      chartRef.value.style.minWidth = '250px';
      chartRef.value.style.minHeight = '290px';
      chartRef.value.style.overflow = 'hidden';
      
      // 销毁已存在的图表实例
      if (myChart) {
        myChart.dispose();
      }
      
      myChart = echarts.init(chartRef.value);
      
      const option = {
        backgroundColor: '#0f2035',
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}人'
        },
        legend: {
          data: ['男性', '女性'],
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          itemWidth: 12,
          itemHeight: 8,
          bottom: 10,
          left: 'center',
          orient: 'horizontal'
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          data: ['18-30岁', '31-40岁', '41-50岁', '51-60岁', '60岁以上'],
          axisLabel: {
            color: '#fff',
            fontSize: 10,
            rotate: 0
          },
          axisLine: {
            lineStyle: {
              color: '#3a5d7e'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: 6000,
          interval: 1500,
          axisLabel: {
            color: '#fff',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: '#3a5d7e'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#3a5d7e',
              opacity: 0.3
            }
          }
        },
        series: [
          {
            name: '男性',
            type: 'bar',
            stack: '总量',
            barWidth: '30%',
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 10
            },
            itemStyle: {
              color: '#38bdf8'
            },
            data: [1500, 1500, 1000, 800, 500]
          },
          {
            name: '女性',
            type: 'bar',
            stack: '总量',
            barWidth: '30%',
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 10
            },
            itemStyle: {
              color: '#ef4444'
            },
            data: [1500, 3000, 1500, 1200, 800]
          }
        ]
      };

      myChart.setOption(option);
      
      // 确保图表正确渲染
      setTimeout(() => {
        if (myChart) {
          myChart.resize({
            width: 250,
            height: 290
          });
        }
      }, 50);
    };

    onMounted(() => {
      // 使用 setTimeout 确保 DOM 完全渲染
      setTimeout(() => {
        initChart();
      }, 100);
      
      // 添加窗口大小调整事件
      window.addEventListener('resize', () => {
        if (myChart) {
          setTimeout(() => {
            myChart.resize({
              width: 250,
              height: 290
            });
          }, 50);
        }
      });
    });

    onUnmounted(() => {
      if (myChart) {
        myChart.dispose();
      }
      window.removeEventListener('resize', () => {});
    });

    return {
      chartRef
    };
  }
};
</script>

<style scoped>
.chart-container {
  width: 250px;
  height: 290px;
  min-width: 250px;
  min-height: 290px;
  position: relative;
  overflow: hidden;
}

#main {
  width: 250px;
  height: 290px;
  min-width: 250px;
  min-height: 290px;
}
</style>